【前言】
昨天我們實作了第一個React Component了,有沒有覺得自己有沒有變強了一點呢?這篇要來介紹一下React的Props屬性囉!
【正文】
回想上次的 Hello,Hyora ,在單單只render一句話的時候是不是覺得還好,可是如果要render很多個呢?總不可能要把程式碼寫成這樣吧?
//上方import略
class App extends React.Component {
render() {
return (
<div>
<div>Hello, Hyora</div>
<div>Hello, Leo</div>
<div>Hello, Nelly</div>
</div>
);
}
}
// 下方export略
上面這樣寫也太不漂亮了,又臭又長,而且重複的地方好多哦。難道不可以把名稱就當成什麼變數傳遞下去再叫React render嗎?答案是可以的!首先要記住Props(Property)有幾個特點:
回頭來看看剛剛的程式碼,我們可以將其切割成一個<Greeting>
Component,並在App.js
import時,將名字當成Props傳給<Greeting>
,讓其render出來。讓我們來改寫一下吧,首先:
調整專案資料夾目錄結構,並新增Greeting.js
檔:
撰寫Greeting.js
檔案
import React from 'react';
class Greeting extends React.Component {
render() {
const { name } = this.props; // 運用ES6解構,對應出this.props的結構
return(
<div style={{ textAlign: 'center' }}>
Hello, {name} {/* 將props值用{}放進要放入的地方*/}
</div>
);
}
}
export default Greeting; // 匯出Greeting Component
App.js
import React from 'react';
import Greeting from './component/Greeting'; // import Greeting 模組
class App extends React.Component {
render() {
return (
<div>
{/* 將name這個屬性裡面的值當成是props傳給Greeting */}
<Greeting name="Hyora"/>
<Greeting name="Yoyo" />
<Greeting name="Leo" />
<Greeting name="Nelly" />
</div>
);
}
}
export default App;
再回到我們的網頁,是不是得到跟昨天一樣的結果呢?雖然因為我們的範例內容很少,看起來與原本的差沒有多少,反倒還要再多寫一隻js檔案,不過如果之後等專案很大、<Greeting>
組件很常被用到時,利用Props傳入render也不失是一個好方法哦。
那今天就到這邊囉,明天會再繼續另外一種屬性state
,我們下次見,bye~